<template>
    <div class="login-1">
        <a-form
            :model="formState"
            name="normal_login"
            class="login-form"
            @finish="toLogin"
            @finishFailed="toLoginFailed"
        >
            <a-form-item
                label="Username"
                name="username"
                :rules="[{ required: true, message: 'Please input your username!' }]"              
            >
            <a-input v-model:value="formState.username" placeholder="请输入用户名" autocomplete>
                <template #prefix>
                    <component is="user-outlined" class="site-form-item-icon" />
                </template>
            </a-input>
            </a-form-item>

            <a-form-item
                label="Password"
                name="password"
                :rules="[{ required: true, message: 'Please input your password!' }]"
            >
            <a-input-password v-model:value="formState.password" placeholder="请输入登录密码" autoComplete="true">
                <template #prefix>
                    <component is="lock-outlined" class="site-form-item-icon" />
                </template>
            </a-input-password>
            </a-form-item>
            <a-form-item>
            <a-form-item name="remember" no-style>
                <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
            </a-form-item>
            <a class="login-form-forgot" href="">Forgot password</a>
            </a-form-item>

            <a-form-item>
                <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">
                    Log in
                </a-button>
                Or
                <a href="">register now!</a>
            </a-form-item>
        </a-form>
    </div>
</template>
<script>
import { getCurrentInstance, defineComponent, reactive, computed } from 'vue';
import { message } from "ant-design-vue";
import { useRouter } from 'vue-router';
import {$http} from '@/utils/axios';
export default defineComponent({
    name:'Login',
    setup() {
        const formState = reactive({
            username: '',
            password: '',
            remember: true,
        });

        const toLoginFailed = errorInfo => {
            console.log('Failed:', errorInfo);
        };

        const disabled = computed(() => {
            return !(formState.username && formState.password);
        });

        const {appContext: {config: {globalProperties: global}}} = getCurrentInstance();
        const router = useRouter();

        /**
         * 登录
         * @param {表单属性值} values 
         */
        const toLogin = (values) =>{
            console.log('Success:', values);
            $http.post("/gatewayServer/userServeController/userLoginVerify",values).then((result)=>{
                //console.log(result);
                if(result.data.code === "0000"){
                    sessionStorage.setItem("currentUser",JSON.stringify(result.data.data));
                    router.push("/index");
                    formState.username = "";
                    formState.password = "";
                    message.success("登录成功");
                }else{
                    message.error(result.data.msg || "登录失败");
                }               
            }).catch((error)=>{
                console.log("登录异常:"+error);
                 message.error("系统异常,登录失败");
            });         
        };

        return {
            formState,
            toLoginFailed,
            disabled,
            toLogin
        };
    }
});
</script>
<style scoped>
.login-1{
    width: 100%;
    height: 100%;
}
.login-form {
    margin: 0 auto;
    padding-top: 10%;
    max-width: 500px;
}
.login-form-forgot {
  float: right;
}
.login-form-button {
  width: 100%;
}
</style>